<template>
  <div>
    <h1>setup语法糖</h1>
    <h1>{{ mygame }}</h1>
    <h1>{{ datas.name }}</h1>
    <ul>
      <li v-for="(item, index) in datas.list" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="say">点击</button>
    <hr />
    <sugar-com
      ref="sugarComs"
      @sendli="getLi"
      :km="1500"
      :food="'烤腰子'"
    ></sugar-com>
    <button @click="getCname">获取子组件数据</button>
  </div>
</template>
<script lang="ts" setup>
import sugarCom from './sugarCom.vue'
import { ref, reactive, defineComponent } from 'vue'
import { useRouter } from 'vue-router'
let mygame = ref('和平精英')
let say = () => {
  alert(1111)
}
//vue3 语法糖注册子组件
defineComponent({ sugarCom })

let datas = reactive({
  name: '小王',
  list: ['王者', '青铜', '黑铁']
})
// 子传父 触发的事件函数
let getLi = a => {
  console.log(a)
}
let router = useRouter()
// 获取子组件的defineExpose暴露数据
let sugarComs = ref() //获取子组件
let getCname = () => {
  // 子组件.value.数据
  console.log(sugarComs.value.cname)
}
</script>

<style lang="less"></style>
